#include("../layout.html")
#set(PATH='/core/account')
#@layout()

#define css()
<link href="#(CTX)/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="#(CTX)/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
#end

#define js()
<script src="#(CTX)/js/plugins/jsTree/jstree.min.js"></script>
<!-- Bootstrap table -->
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="#(CTX)/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- jquery.form -->
<script src="#(CTX)/js/plugins/form/jquery.form.min.js"></script>

<script src="#(CTX)/js/plugins/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>

<script>
    _dictKit = _GetDictKit("UserRank");
    _datasetKit = _GetDatasetKit("OrgList");
</script>

<script src="#(CTX)/core/static/js/Account/UserRoleDialog.js"></script>

<script>
<!-- 密码重置对话框js -->
var resetPwdDialog = function(){
    var modal = $('#resetPwdDialog');
    var submitUrl = _CTX_ + _PATH_ + '/resetPwd';
    var form = modal.find("form");
    var _callback;
    var btnSubmit = modal.find("#btnSubmit");

    btnSubmit.click(function(){
        form.ajaxSubmit({
            url:submitUrl,
            type:"POST",
            dataType:"json",
            cache:false,
            success:function(ret){
                if(ret.state == "ok"){
                    if(_callback && typeof(_callback)=='function'){
                        result = _callback(ret);
                        if(typeof(result) == 'undefined' || result != false){
                            alert("已重置密码!");
                            modal.modal('hide');
                        }
                    }else{
                        alert("已重置密码!");
                        modal.modal('hide');
                    }
                }else{
                    alert(ret.msg);
                }
            }
        });
    });

    return {
        show: function (uuid, options) {
            if(uuid){
                if(options && options.title){
                    modal.find(".modal-title").html(options.title);
                }
                if(options && options.callback){
                    _callback = options.callback;
                }
                form.find("#r_uuid").val(uuid);
                modal.modal('show');
            }
        }
    }

}();
</script>

<script>
<!-- 编辑新增对话框js,如有需要请导出到对应的对话框js文件中 -->
var accountDialog = function(){
    var modal = $('#accountDialog');
    var saveUrl = _CTX_ + _PATH_ + '/save';
    var form = modal.find("form");
    var _callback;
    var btnSave = modal.find("#btnSave");

    _dictKit.initSelect(modal.find("select#rank"), "UserRank");

    btnSave.click(function(){
        form.ajaxSubmit({
            url:saveUrl,
            type:"POST",
            dataType:"json",
            cache:false,
            success:function(ret){
                if(ret.state == "ok"){
                    if(_callback && typeof(_callback)=='function'){
                        result = _callback(ret);
                        if(typeof(result) == 'undefined' || result != false){
                            modal.modal('hide');
                        }
                    }else{
                        modal.modal('hide');
                    }
                }else{
                    alert(ret.msg);
                }
            }
        });
    });
    
    return {
        show: function (entity, options) {
            if(options.title){
                modal.find(".modal-title").html(options.title);
            }
            if(options && options.callback){
                _callback = options.callback;
            }
            _FormKit_.bindData(form,entity,"entity",options.readOnly);
            if(entity.uuid){
                form.find('input#account').attr("readOnly","readOnly");
            }
            modal.modal('show');
        }
    }
    
}();
</script>
<script>
<!-- 页面js,请自行将js内容导出到js文件中 -->
$(document).ready(function () {
    var _listUrl = _CTX_ + _PATH_ + '/list';
    var _treeUrl = _CTX_ + '/core/orgnazation/list';
    var _batchDeteleUrl = _CTX_ + _PATH_ + '/batchDelete';

    var _bottomHeight = 103;
    var _tableMinHeight = 450;
    var _maxHeight = $container().height();
    var _tableHeight = _maxHeight - $('#table').position().top - _bottomHeight;
    _tableHeight = _tableHeight < _tableMinHeight?_tableMinHeight:_tableHeight;

    $('#jstree').css({'height': calcSuitableHeight($('#table')), 'overflow': 'auto'});

    $('#jstree').jstree({
        'core': {
            'data': function (obj, callback) {
                var params = {"parentId": obj.id};
                if (obj.original && obj.original.rank == "depart") {
                    params["rank"] = "depart";
                }
                $.ajax({
                    "url": _treeUrl,
                    "type": "POST",
                    "data": params,
                    "async": true,
                    "cache": false,
                    "dataType": "json"
                }).done(function (ret) {
                    if (ret.state == 'ok') {
                        var nodes = [];
                        for (var index in ret.data) {
                            nodes.push({
                                "id": ret.data[index].uuid,
                                "text": ret.data[index].name,
                                "rank": ret.data[index].rank,
                                "route": ret.data[index].route,
                                "children": (ret.data[index].childrenCount > 0 ? true : false)
                            });
                        }
                    }
                    callback.call(this, nodes);
                });
            }
        }
    }).on(
        {
            'loaded.jstree': function (e, data) {
                var inst = data.instance;
                var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);
                inst.select_node(obj);
                $("#s_org").val(obj.id);
                $('#table').bootstrapTable("refresh");
            },
            "activate_node.jstree": function (node, event) {
                $("#s_org").val(event.node.original.route);
                $('#table').bootstrapTable("refresh");
            }
        }
    );


    $('#table').bootstrapTable({
        url: _listUrl,
        method: 'get',
        queryParams: function () {
            //每次查询时传入后台的查询条件
            return {"orgnazation": $("#s_org").val()}
        },
        height: _tableHeight,
        pagination: true,
        pageNumber: 1,
        pageSize: 20,
        pageList: [20, 50, 100],
        clickToSelect: false,
        search: true,
        searchOnEnterKey: true,
        showRefresh: true,
        toolbar: '#toolbar',
        columns: [{
            checkbox: true
        }, {
            field: 'uuid',
            title: '主键',
            visible: false,
            searchable: false
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'phone',
            title: '电话号码'
        }, {
            field: 'email',
            title: '邮箱地址'
        }, {
            field: 'orgnazation',
            title: '所属部门',
            formatter: function (value, row, index, field) {
                return _datasetKit.getLabel("OrgList", value);
            }
        },{
            field: 'rank',
            title: '账号类型',
            formatter: function (value, row, index, field) {
                return _dictKit.getLabel("UserRank", value);
            }
        }, {
            title: '操作',
            events: {
                "click .resetPwd": function(e, value, row, index){
                    resetPwdDialog.show(row.uuid);
                    return false;
                },
                "click .roleSet": function(e, value, row, index){
                    $.ajax({
                        "url": _CTX_ + _PATH_ + "/getRoleIdsByUserId",
                        "type": "POST",
                        "data": {"userId":row.uuid},
                        "async": true,
                        "cache": false,
                        "dataType": "json"
                    }).done(function (ret) {
                        if (ret.state == 'ok') {
                            userRoleDialog.show({"userId":row.uuid, "roleIds":ret.data});
                        }else{
                            alert(ret.msg);
                        }
                    });

                    return false;
                }
            },
            formatter: function (value, row, index, field){
                console.log(row.rank)
                return (row.rank=="super"?'<span style="color:grey">角色设置</span>':'<a href="#" class="roleSet" >角色设置</a>') + '&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="resetPwd">重置密码</a>';
            }
        }]
    });

    $('#btnAdd').click(function () {
        accountDialog.show({"orgnazation":$("#s_org").val()}, {
            "title": "新增账号",
            "callback": function () {
                $('#table').bootstrapTable("refresh");
            }
        });
    });

    $('#btnEdit').click(function () {
        var selections = $('#table').bootstrapTable('getSelections');
        if (selections && selections.length == 1) {
            accountDialog.show(selections[0], {
                "title": "编辑账号",
                "callback": function () {
                    $('#table').bootstrapTable("refresh");
                }
            });
        }else{
            alert("只能选择一个");
        }
    });

    $('#btnDelete').click(function () {
        var selections = $('#table').bootstrapTable('getSelections');
        if (selections) {
            var pkArray = [];
            for(var i in selections){
                pkArray.push(selections[i].uuid);
            }
            $.ajax({
                url: _batchDeteleUrl,
                type: 'POST',
                data: $.param({"uuids": pkArray}, true),
                cache: false,
                dataType: 'json',
                success: function (ret) {
                    if (ret.state == 'ok') {
                        alert("删除成功");
                        $('#table').bootstrapTable('refresh');
                    } else {
                        alert(ret.msg);
                    }
                }
            });
        }
    });

    $(window).bind('resize', function () {
        var _maxHeight = $container().height();
        var _tableHeight = _maxHeight - $('#table').position().top - _bottomHeight;
        _tableHeight = _tableHeight < _tableMinHeight ? _tableMinHeight : _tableHeight;
        $('#jstree').css({'height': calcSuitableHeight($('#table')), 'overflow': 'auto'});
        $('#table').bootstrapTable("resetView",{height: _tableHeight});
    });

})
</script>
#end

#define content()
<div class="row">
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h2>组织机构树</h2>
            </div>
            <div class="ibox-content">
                <div id="jstree">
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-lg-9">
        <div class="ibox float-e-margins nomargin">
            <div class="ibox-title">
                <h2>帐号</h2>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Rowstyle -->
                        <div class="example-wrap margin-sm-0">
                            <div class="example">
                                <div id="toolbar" class="btn-group">
                                    <button id="btnAdd" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btnEdit" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btnDelete" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <input type="hidden" id="s_org" name="orgnazation" value="-"/>
                                <table id="table">
                                </table>
                            </div>
                        </div>
                        <!-- End Example Rowstyle -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑新增对话框,如有需要请导出到对应的对话框文件中 -->
<div id="accountDialog" class="modal inmodal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑账号</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal" role="form">
                        <div class="col-md-12">
                            
                            
                            <input type="hidden" data-bind id="uuid" name="entity.uuid" />
                            
                            
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">帐号：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="account" name="entity.account"
                                           placeholder="请输入帐号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="name" name="entity.name"
                                           placeholder="请输入姓名">
                                </div>
                            </div>
                            
                            
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">电话号码：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="phone" name="entity.phone"
                                           placeholder="请输入电话号码">
                                </div>
                            </div>
                            
                            
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">邮箱地址：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="email" name="entity.email"
                                           placeholder="请输入邮箱地址">
                                </div>
                            </div>

                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">级别：</label>
                                <div class="col-sm-9">
                                    <select id="rank" class="form-control" name="entity.rank"></select>
                                </div>
                            </div>
                            

                            <div class="form-group hide">
                                <label class="col-sm-3 control-label">组织机构：</label>
                                <div class="col-sm-9">
                                    <input type="text" data-bind class="form-control" id="orgnazation" name="entity.orgnazation"
                                           placeholder="请输入组织机构">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="btnSave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 重置密码对话框,如有需要请导出到对应的对话框文件中 -->
<div id="resetPwdDialog" class="modal inmodal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">重置密码</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal" role="form">
                        <div class="col-md-12">
                            <input type="hidden" id="r_uuid" name="uuid" />

                            <div class="form-group">
                                <label class="col-sm-3 control-label">新密码：</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="password" name="password"
                                           placeholder="请输入密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="password2"
                                           placeholder="请再次输入密码">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="btnSubmit" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
#include("UserRoleDialog.html")
#end